<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>{{title}}</h1>
			<!-- 全局组件的使用 -->
			<!-- 将组件名作为标签 -->
			<my-temp1></my-temp1>
			<my-temp2></my-temp2>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	
	<template id="temp">
		<div>
			这是一个组件的容器
		</div>
	</template>
	
	<script type="text/javascript">
		// 注册组件：组件名，配置信息
		Vue.component("my-temp1",{
			// 组件中的数据
			data:()=>{
				return {
					title:"这是全局组件1"
				}
			},
			// 组件的结构
			template: "<h3>{{title}}</h3>"
		})
		
		
		Vue.component("my-temp2",{
			data:()=>{
				return {
					title:"这是全局组件2"
				}
			},
			// 组件的结构也可以找现存的template的唯一标志
			template: "#temp"
		})
		
		const vm = new Vue({
		    el:"#app",
			data:{
				title:"测试全局组件"
			},
		})
	</script>
</html>
